import React from 'react';
import ProDescriptions from '@ant-design/pro-descriptions';

export class TrailerDescription extends React.Component {
  constructor(props) {
    // 组件间传值：父向子组件传值，子向父组件传值，兄弟组件之间传值
    // 父向子组件传值：子组件通过props直接访问需要传递的值
    // 子向父组件传值：子组件通过props访问父组件的函数
    // 兄弟组件之间传值：子组件1先向父组件传值，父组件再向子组件2传值
    super(props);
    // 类组件的成员变量，一般用于存放逻辑控制相关的各种Tag，和各种本地配置
    // 建议在构造函数中对成员变量进行初始化。
    this.columns = [
      {
        title: 'ID',
        dataIndex: 'trailer_ID',
      },
      {
        title: '状态',
        key: 'state',
        dataIndex: 'state',
        valueType: 'select',
        valueEnum: {
          all: { text: '全部', status: 'Default' },
          1: {
            text: '在线',
            status: 'Success',
          },
          2: {
            text: '离线',
            status: 'Processing',
          },
          0: {
            text: '断线',
            status: 'Error',
          },
        },
      },
      {
        title: '正在执行的指令',
        dataIndex: 'command',
      },
      {
        title: '开始时刻',
        dataIndex: 'start_time',
      },
      {
        title: '在线时长',
        dataIndex: 'total_time',
      },
    ];
  }
    
  render(){
    const {trailerObj} = this.props
    return (
        <ProDescriptions
          title="拖车详情"
          // style={{ width: 150, height: 600 }}
          column={1}
          dataSource={{
            trailer_ID: trailerObj.trailer_ID,
            state: trailerObj.state,
            command: trailerObj.command,
            start_time: trailerObj.start_time,
            total_time: trailerObj.total_time,
          }}
          columns={this.columns}
        >
        </ProDescriptions>

    );
  }
}